<template>
	<view class="wrap">
    <!-- <u-image class="ban" :showLoading="true" :src="http+'/uploads/rent-ban.jpg'" width="750rpx" height="500rpx"></u-image> -->
    <u-sticky>
      <view class="u-flex u-row-between shaixuan">
        <view class="search-box u-flex-1">
          <view class="u-flex search">
            <u-icon size="40" name="search" style="margin-left: 20rpx;" color="#979797"></u-icon>
            <input type="text" v-model="keywords" confirm-type="搜索" placeholder="搜索房源" @confirm="getList(1)" class="keywords">
          </view>
        </view>
        <view v-for="(item, index) in shaixuanList" :key="index" :class="{on : item.id === shaix_type}" class="item u-flex u-col-center" @click="getShaix(item.id)">
          <text class="u-m-r-10">{{item.name}}</text>
          <u-icon name="arrow-down-fill" size="16" color="#3C3D3E"></u-icon>
        </view>
      </view>
    </u-sticky>
    <view v-for="(item, index) in list" :key="index"  class="rentHouse-list" :class="{last : index === list.length -1}">
      <view class="item u-flex u-col-center u-row-bettwen">
        <view class="u-flex u-col-center u-row-bettwen u-flex-1" @click="link(1, item.house_sn)">
          <image :src="http+item.picList[0].image" class="img" mode="aspectFill" style="width: 200rpx; height:198rpx ;"></image>
          <view class="div u-flex-1">
            <view class="name text-row-2">{{item.house_title}}</view>
            <view class="lab">{{item.house_decoration_name}}</view>
            <view class="price1">{{item.house_rent}}元/月</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 1-区域  2-价格  3-面积   4-装修 5-排序 -->
    <u-popup v-model="showShaix" :top="0" mode="top" border-radius="0" class="pup">
      <view class="bgff">
        <view class="u-flex u-row-between shaixuan">
          <view v-for="(item, index) in shaixuanList" :key="index" :class="{on : item.id === shaix_type}" class="item u-flex u-col-center" @click="getShaix(item.id)">
            <text class="u-m-r-10">{{item.name}}</text>
            <u-icon v-if="item.id === shaix_type" name="arrow-up-fill" size="16" color="#2A70F9"></u-icon>
            <u-icon v-else name="arrow-down-fill" size="16" color="#3C3D3E"></u-icon>
          </view>
        </view>
        <view v-if="shaix_type === 1" class="area-box u-flex u-row-bettwen">
          <view class="left">
            <view v-for="(item, index) in areaList" :key="index" :class="{on : item.id === areaId}" class="item u-flex u-col-center" @click="getOtherId(item.id, 'areaId')">
              <text class="u-m-r-10">{{item.name}}</text>
            </view>
          </view>
          <view class="right">
            <view v-for="(item, index) in areaList2" :key="index" :class="{on : item.id === areaId2}" class="item u-flex u-col-center" @click="getOtherId(item.id, 'areaId2')">
              <text class="u-m-r-10">{{item.name}}</text>
            </view>
          </view>
        </view>
        <view v-if="shaix_type === 2" class="prcie-box">
          <view v-for="(item, index) in priceList" :key="index" :class="{on : item.id === priceId}" class="item u-flex u-col-center" @click="getOtherId(item.id, 'priceId')">
            {{item.name}}
          </view>
        </view>
        <view v-if="shaix_type === 3" class="prcie-box">
          <view v-for="(item, index) in mianjiList" :key="index" :class="{on : item.id === mianjiId}" class="item u-flex u-col-center" @click="getOtherId(item.id, 'mianjiId')">
            {{item.name}}
          </view>
        </view>
        <view v-if="shaix_type === 4" class="prcie-box">
          <view v-for="(item, index) in zhuangxiuList" :key="index" :class="{on : item.id === zhuangxiuId}" class="item u-flex u-col-center" @click="getOtherId(item.id, 'zhuangxiuId')">
            {{item.name}}
          </view>
        </view>
        <view v-if="shaix_type === 5" class="prcie-box">
          <view v-for="(item, index) in paixuList" :key="index" :class="{on : item.id === paixuId}" class="item u-flex u-col-center" @click="getOtherId(index ,'paixuId')">
            {{item.name}}
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<style lang="scss" scoped>
  .wrap{background-color: #fff;}
  .pup{
    .shaixuan{
      box-shadow: 0 1px 4px #ededed; position: relative; z-index: 5;
      .item.on{color: #2A70F9;}
    }
    .prcie-box{
      padding: 30rpx;
      .item{
        display: flex; align-items: center; height: 82rpx; color: #666; font-size: 30rpx;
        &.on{color: #2A70F9;}
      }
    }
    .area-box{
      align-items: stretch;
      .left{
        width: 180rpx; background-color: #F5F7FB;
        .item{
          height: 82rpx; position: relative; padding-left: 30rpx; color: #666; font-size: 30rpx;
          &.on{
            color: #2A70F9; background-color: #fff;
            &::after{content: ''; display: block; width: 4rpx; background-color: #2A70F9; height: 52rpx; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
          }
        }
      }
      .right{
        width: 100%; flex: 1; background-color: #fff;
        .item{
          height: 82rpx; display: flex; align-items: center; padding: 0 20rpx;color: #666; font-size: 30rpx;
          &.on{color: #151515;}
        }
      }
      .right,.left{max-height: calc(100vh - 300rpx); overflow-y: auto;}
    }
  }
  .rentHouse-list{
    .item{
      border-bottom: 1px solid #ededed !important; border-top: none;
    }
    &.last .item{border-bottom: none !important;}
  }
  .ban{position: relative; z-index: 1;}
  .search-box{
    padding-right: 30rpx; position: relative; z-index: 4; border-radius: 10rpx 10rpx 0 0; background-color: #fff; padding-bottom: 10rpx;
  }
  .search{
    background-color: #F3F2F7; border-radius: 40rpx;
    height: 80rpx; background-color: #F3F2F7;
    .keywords{flex: 1; width: 100%;}
  }
  .shaixuan{
    padding:20rpx 30rpx; background-color: #fff; box-shadow: 0px 2rpx 7rpx #ddd; margin-bottom: 30rpx;
    .item{height: 94rpx;}
  }
</style>
<script>
	export default {
		data() {
			return {
        keywords:'', // 搜索条件
        showShaix:false, // 筛选框
        shaix_type:0,
        navH:'',
        shaixuanList:[ {id:5, name:'排序'}], // {id:1, name:'区域'}, {id:2, name:'价格'}, {id:3, name:'面积'}, {id:4, name:'装修'},
         
        areaList:[
          {id:1, name:'全部'}, 
          {id:2, name:'包河'}, 
          {id:3, name:'滨湖'}, 
          {id:4, name:'装修'}
        ],
        areaList2:[
          {id:1, name:'全部'}, 
          {id:2, name:'百脑汇'}, 
          {id:3, name:'包河工业区'}, 
          {id:4, name:'巢湖路'},
          {id:5, name:'火车站'},
          {id:6, name:'明珠广场'},
          {id:7, name:'高铁南站'},
        ],
        priceList:[
          {id:1, name:'不限'}, 
          {id:2, name:'500/月以下'}, 
          {id:3, name:'500-1000/月'}, 
          {id:4, name:'1000-1500/月'},
          {id:5, name:'1500-2000元/月'},
          {id:6, name:'2000-2500元/月'},
          {id:7, name:'2500-3000元/月'}
        ],
        zhuangxiuList:[
          {id:1, name:'不限'}, 
          {id:2, name:'毛坯'}, 
          {id:3, name:'简装'}, 
          {id:4, name:'精装'},
          {id:5, name:'豪华装修'},
        ],
        mianjiList:[
          {id:1, name:'不限'}, 
          {id:2, name:'100㎡以下'}, 
          {id:3, name:'100-200㎡'}, 
          {id:4, name:'200-300㎡'},
        ],
        paixuList:[
          {id:3, field:'price', order:'asc',  name:'价格（从低到高）'}, 
          {id:4, field:'price', order:'desc', name:'价格（从高到低）'},
          {id:5, field:'area', order:'asc', name:'面积（从小到大）'},
          {id:6, field:'area', order:'desc', name:'面积（从大到小）'},
          {id:7, field:'decoration', order:'asc', name:'装修（从毛坯到豪华）'},
          {id:8, field:'decoration', order:'desc', name:'装修（从豪华到毛坯）'},
        ],
        towardList:[],
        areaId:1,
        areaId2:1,
        priceId:1,
        zhuangxiuId:1,
        mianjiId:1,
        paixuId:1,
        list: [
          
        ],
        page:1,
        http:'',
        field:'',
        order:'',
        total:-1
			}
		},
    onShow(){
      this.list = []
      this.getList(0);
      this.http = this.$api.httpUrlApi();
    },
    watch: {
      
    },
    
		methods: {
      link(e, id){
        if(e == 1){
          uni.navigateTo({
            url:'/rentHouse/detail?type=2&id='+id
          })
          
        }
      },
      getOtherId(e, name){
        this[name] = e;
        if(name == 'paixuId'){
          console.log('this.paixuList[e]', this.paixuList[e])
          this.field = this.paixuList[e].field;
          this.order = this.paixuList[e].order;
          this.paixuId = this.paixuList[e].id;
          this.showShaix = false;
        }else if(name != 'areaId'){
          this.showShaix = false;
        }else{
          this.areaId2 = ''
        }
        this.getList(1)
      },
      // 筛选开光
      getShaix(e){
        if(this.shaix_type == e){
          this.shaix_type = '';
          this.showShaix = false;
        }else{
          this.shaix_type = e;
          this.showShaix = true;
        }
        
      },
      // 获取列表
      getList(type = 0){
        if(type == 1){
          this.page = 1;
          this.list = [];
        }
        if(this.total === this.list.length) return
        this.$api.userGetHousingResourcesListApi({
          page:this.page,
          keyWord: this.keywords,
          field:this.field,
          isAll:0,
          order:this.order
        }).then(res=>{
          if(res.code === 1){
            this.total = res.data.total
            this.list = this.list.concat(res.data.data);
            if(this.list.length < res.data.total){
              this.page++
            }
          }
        })
      },
		},
    onShareAppMessage() {
      // return {
      //   title: '',
      //   path: '/pages/index/index',
      // }
    },
    onReachBottom() {
      if(this.page > 1){
        this.getList()
      }
    }
	}
</script>